<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, initial-scale=1, shrink-to-fit=no">
    <div th:replace="~{admin/common :: common-link}"></div>
    <style>
        span {
            display: inline-block;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
            max-width: 500px;
        }
        img {
            object-fit: cover;
        }
    </style>
</head>
<body>

<div class="content">
    <div class="block block-fx-shadow">
        <div class="block-content">
            <form id="saveForm" method="post" >
                <div class="form-group row">
                    <label class="col-lg-4 col-md-2 col-form-label" for="themeUrl">主题地址 <span style="position: absolute; left: 75px;" title="主题地址必须是hexo-boot-theme系列"><i class="fa fa-info-circle"></i></span></label>
                    <div class="col-lg-8 col-md-8">
                        <input type="text" class="form-control" id="themeUrl" name="themeUrl" placeholder="主题地址" >
                    </div>
                    <div class="col-lg-4 col-md-2">
                        <button type="button" class="btn btn-primary" id="submitBtn">拉取</button>
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-lg-12 col-md-12">
                        <textarea id="resultContainer" class="form-control" cols="30" rows="6" style="resize: none;overflow: auto;" disabled></textarea>
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-lg-12 col-md-12">
                        <div>
                            <b>获取主题: </b><a href="https://github.com/moonlightL" target="_blank">GitHub资源</a>&nbsp;&nbsp;
                            <a href="https://gitee.com/moonlightL" target="_blank">码云资源</a>&nbsp;&nbsp;
                        </div>
                        <div>
                            <b>友情提示: 找到“hexo-boot-theme-xxx” 类型的主题复制其 .git 地址到输入框，点击“拉取”即可下载安装</b>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<div th:replace="~{admin/common :: common-script}"></div>
<script type="text/javascript" th:inline="javascript">
    $(function () {
        $("#submitBtn").on("click", function () {
            let that = this;
            let themeUrl = $("#themeUrl").val();
            if (!themeUrl) {
                $.hexo.modal.tip("主题地址不能为空");
                return;
            }

            let index = themeUrl.indexOf("hexo-boot-theme");
            if (index < 0) {
                $.hexo.modal.tip("主题地址格式不正确");
                return;
            }

            let split = themeUrl.split("-");
            let tmp = split[split.length - 1];
            let themeName = tmp.split(".")[0];

            $(that).prop("disabled", true);
            let $resultContainer = $("#resultContainer");
            $resultContainer.val("***********************************************【开始】***********************************************")
                            .val($resultContainer.val() + "\n[5%] 开始拉取" + themeName + "主题...");

            $.ajax({
                type: "POST",
                url: BASE_URL + "/fetchTheme.json",
                data: {"themeUrl": themeUrl},
                dataType: "JSON",
                success: function (resp) {
                    $(that).prop("disabled", false);
                    if (resp.success) {
                        let num = 0;
                        $resultContainer.val($resultContainer.val() + "\n[80%] " + themeName + "主题拉取成功,正在进行安装...");
                        let timer = setInterval(function() {
                            $.ajax({
                                type: "POST",
                                url: BASE_URL + "/checkThemeName.json",
                                data: {"themeName": themeName},
                                dataType: "JSON",
                                success: function (resp) {
                                    num++;
                                    if (resp.data === true) {
                                        $resultContainer.val($resultContainer.val() + "\n[100%] " + themeName + "主题安装成功!")
                                                        .val($resultContainer.val() + "\n***********************************************【结束】***********************************************");
                                        window.parent.ThemeManager.query();
                                        clearInterval(timer);
                                    }

                                    // 10 秒内不能成功保存主题配置，视为失败
                                    if (num >= 10) {
                                        clearInterval(timer);
                                        $resultContainer.val($resultContainer.val() + "\n[失败] " + themeName + "主题配置保存失败!")
                                            .val($resultContainer.val() + "\n***********************************************【结束】***********************************************");
                                    }
                                }
                            });
                        }, 1000);
                    }
                },
                error: function () {
                    $(that).prop("disabled", false);
                    $resultContainer.val($resultContainer.val() + "\n[失败] " + themeName + "主题拉取失败!")
                                    .val($resultContainer.val() + "\n***********************************************【结束】***********************************************");
                }
            });
        });
    });
</script>
</body>
</html>